
  <!-- 组件的好处:各自独立,便于复用 ,可维护性高-->
  <!-- 前端组件的开发好处:提高了复用性和灵活性 -->
<template>
 <div id="app">
  <h3>案例：折叠面板</h3>
  <!-- 使用组件和标签一样 -->
  <!-- <组件名></组件名> -->
  <panel></panel>
  <panel></panel>
  <panel></panel>
 </div>
</template>

<script>
// 组件的使用流程:
//1.封好组件=>.vue
//2.引入组件
//3.注册组件
//4.使用组件
import panel from './components/panel.vue'
export default {
  //注册分为全局注册和局部注册
  //局部注册是在组件内注册(在哪用就在哪注册)
  //components:{
    //组件名:组件对象
  //}
  components: { panel },
 data() {
  return {
  }
 }
}
</script>

<style lang="less">
body {
 background-color: #ccc;
 #app {
  width: 400px;
  height: 320px;
  margin: 20px auto;
  background-color: #fff;
  border: 4px solid blueviolet;
  border-radius: 1em;
  box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5);
  padding: 1em 2em 2em;
  h3 {
   text-align: center;
  }
  .box {
   box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.5);
   border-radius: 4px;
   border: 1px solid #ebeef5;
   background-color: #fff;
   overflow: hidden;
   color: #303133;
   transition: .3s;
  }
  .title {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 10px 20px;
  }
  .title h4 {
   line-height: 2;
   margin: 0;
  }
  .container {
   padding: 0 20px;
   border-top: 1px solid #ccc;
  }
  .btn {
   /* 鼠标改成手的形状 */
   cursor: pointer;
  }
 }
}
</style>